<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页-全部关注</title>

    <link
      rel="stylesheet"
      href="../../static/css/iconfont01.css"
      th:href="@{/static/css/iconfont01.css}"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="../../static/css/publishBlog.css"
      th:href="@{/static/css/publishBlog.css}"
    />
    <link
      rel="stylesheet"
      href="../../static/customAlertConfirm/customAlertConfirm.css"
      th:href="@{/static/customAlertConfirm/customAlertConfirm.css}"
    />
    <link
      rel="stylesheet"
      href="../../static/css/common.css"
      th:href="@{/static/css/common.css}"
      type="text/css"
    />

    <link
      rel="stylesheet"
      href="../../static/css/replymask.css"
      th:href="@{/static/css/replymask.css}"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="../../static/css/more.css"
      th:href="@{/static/css/more.css}"
      type="text/css"
    />

  </head>

  <body>
    <!--  回复弹窗-->
    <div th:replace="~{unlogin :: mask }">
      <div class="window">
        <div class="reply-top">
          <div class="top-text">回复</div>
          <div class="top-cancel">
            <i class="iconfont">&#xe652;</i>
          </div>
        </div>
        <div class="reply-container">
          <textarea
            name="reply"
            placeholder="请发布你的回复"
            class="reply-text"
          ></textarea>
          <p class="ddl">还可输入100字</p>
          <button class="reply-btn disable">回复</button>
        </div>
      </div>
    </div>
    <!--    更多回复弹窗-->
    <div class="more-reply-mask" th:fragment="more-reply-mask">
      <div class="more-window">
        <div class="window-top">
          <div class="window-top-text">回复</div>
          <div class="window-top-cancel"><i class="iconfont">&#xe650;</i></div>
        </div>
        <div class="window-content">
          <div class="content-comment">

          </div>
        </div>
      </div>
    </div>
    <!--发布弹窗-->
    <div class="publishBlogBox hidden" th:fragment="publishBlogBox">
      <div class="publishBlog">
        <p>发布微博</p>
        <i class="iconfont publishCancel">&#xe650;</i>
        <form
                class="blogPubForm"
                enctype="multipart/form-data"
        >
          <textarea
                  name="text"
                  id="publishBlogArea"
                  cols="30"
                  rows="10"
                  placeholder="分享日常,发表看法..."
          ></textarea>
          <div class="imagePreview">
            <div class="imagePreviewContainer"></div>
          </div>
          <div class="imageUpload">
            <button
                    type="button"
                    class="addImageButton"
            >
              添加图片
            </button>
            <input
                    type="file"
                    id="imageInput"
                    accept="image/*"
                    name="myFiles"
                    style="display: none"
                    multiple="multiple"
            />
          </div>
          <div class="blogBottom">
            <div class="bottomBox">
              <i class="iconfont">&#xe8ba;</i><span>图片</span>
              <div id="imageInputs"></div>
            </div>
            <div class="bottomBox">
              <i class="iconfont">&#xe8b1;</i><span>话题</span>
              <div>
                <input name="label" id="label" placeholder="为您的微博添加标签"/>
                <div class="labelList" style="display:none">
                  <ul class="labelListUl">

                  </ul>
                </div>
              </div>
            </div>
            <div class="bottomBox">
              <i class="iconfont">&#xe7f9;</i><span>类别</span>
              <div id="categorySelects">
              </div>
            </div>
          </div>
          <button class="publish">发布</button>
        </form>
      </div>
    </div>
    <!-- 点击举报会出现的弹窗 -->
    <div class="tip-off hidden" th:fragment="tip-off">
      <div class="CPM">
        <h3>举报</h3>
        <p class="close">×</p>
        <div class="pop-up1">
          <div class="report report-item2">
            <p>举报原因(必填):</p>
            <div class="necessary">
              <ul class="necessary-ul">
                <li>
                  <label for="radio1">
                    <input type="radio" name="radioName" id="radio1" />
                    <span class="fav-title">发布淫秽信息</span>
                  </label>
                </li>
                <li>
                  <label for="radio2">
                    <input type="radio" name="radioName" id="radio2" />
                    <span class="fav-title">发布政治敏感信息</span>
                  </label>
                </li>
                <li>
                  <label for="radio3">
                    <input type="radio" name="radioName" id="radio3" />
                    <span class="fav-title">谩骂/人身攻击</span>
                  </label>
                </li>
                <li>
                  <label for="radio4">
                    <input type="radio" name="radioName" id="radio4" />
                    <span class="fav-title">发布商业信息</span>
                  </label>
                </li>
                <li>
                  <label for="radio5">
                    <input type="radio" name="radioName" id="radio5" />
                    <span class="fav-title">欺诈骗钱</span>
                  </label>
                </li>
                <li>
                  <label for="radio6">
                    <input type="radio" name="radioName" id="radio6" />
                    <span class="fav-title">低俗</span>
                  </label>
                </li>
                <li>
                  <label for="radio7">
                    <input type="radio" name="radioName" id="radio7" />
                    <span class="fav-title">侵犯隐私</span>
                  </label>
                </li>
              </ul>
            </div>
          </div>
          <div class="report report-item3">
            <p class="otherThing">
              <label for="radio8">
                <input type="radio" name="radioName" id="radio8" />
                <span>其他</span>
              </label>
            </p>

            <div class="other-reason hidden">
              <textarea
                placeholder="自定义理由(100字以内)"
                class="other-ta"
                maxlength="100"
              ></textarea>
            </div>
          </div>
        </div>
        <button class="btn-sure">提交</button>
      </div>
    </div>

    <div th:replace="~{hot::#model}"></div>
    <!-- 发布 -->
    <div class="top" th:fragment="top">
      <div id="top">
        <!-- logo -->
        <div id="logo-search">
          <div class="logo">
            <img
              src="../../static/img/logo.png"
              th:src="@{/static/img/logo.png}"
              alt=""
            />
          </div>
          <div class="top-search" th:fragment="topSearch">
            <form th:action="@{/blog/skipToBlog}" autocomplete="off">
              <span><i class="iconfont">&#xe623;</i></span>
              <input
                type="text"
                placeholder="请输入搜索内容"
                id="top-input"
                name="label"
              />
            </form>
            <div class="search-list">
              <div class="aboutBlog">
                <span>相关微博</span>
              </div>
              <div class="search-hot">
                <div>
                  <a href="/weibo/blog/skipToBlog?label=${hotlistArr[i].label}">
                    <p class="blog-details">
                      <i class="iconfont">&#xe65a;</i>
                      1234566666666666666666666666666
                    </p>
                  </a>
                </div>
              </div>
              <div class="aboutUser">
                <span>相关用户</span>
              </div>
              <div class="search-user"></div>
            </div>
          </div>
        </div>

        <!-- 各种功能 -->
        <div id="fn">
          <div class="home border fn">
            <a
              class="icon"
              href="home.html"
              th:href="@{/blog/getMyConnectionBlog(msg='登录成功')}"
              ><i class="iconfont">&#xe625;</i></a
            >
          </div>
          <div class="hot fn">
            <a
              class="icon"
              href="hot.html"
              th:href="@{/blog/getIndexBlog(state=2)}"
              ><i class="iconfont">&#xe628;</i></a
            >
          </div>
          <div class="message fn">
            <a
              class="icon"
              href="message.html"
              th:href="@{/user/getOthersCommentOfMe}"
              ><i class="iconfont">&#xe908;</i></a
            >
          </div>
          <div class="private fn">
            <a
              class="icon"
              href="personalPage.html"
              th:href="@{/my/toMyInfo}"
              ><i class="iconfont">&#xe60a;</i></a
            >
          </div>
        </div>
        <!-- 设置等-->
        <div class="access" th:fragment="access">
          <div class="setting">
            <button class="top-setting-btn">
              <i class="iconfont">&#xe645; </i>
            </button>
            <div class="setting-list">
              <a th:href="@{/my/toMyInfo}" >个人中心</a>
              <a th:href="@{/my/echoMyMessage}">账号修改</a>
              <a th:href="@{/user/logout}">退出</a>
            </div>
          </div>

          <div class="setting">
            <button class="top-pattern-btn">
              <i class="iconfont">&#xe6d9;</i>
            </button>
          </div>
          <div class="setting">
            <button class="top-publish-btn">
              <i class="iconfont">&#xe61d; </i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="list" id="list">
        <p>首页</p>
        <ul>
          <a class="color" th:href="@{/blog/getMyConnectionBlog}">
            <span><i class="iconfont">&#xe655;</i></span>
            全部关注
          </a>
          <a
            href="home-new.html"
            th:href="@{/blog/getMyLatestConnectionBlog}"

          >
            <span><i class="iconfont">&#xe634;</i></span>

            最新微博
          </a>
        </ul>
      </div>
      <div id="news">
        <div class="allnews">
          <div class="news" th:each="attention:${list}" th:bid="${attention.id}" th:uid="${attention.uid}">
            <div class="news-top">
              <a
                      class="head-link"
                      th:href="@{/user/toOnesInfo(id=${attention.uid})}"
              >
                <div class="head">
                  <img

                          th:src="@{${attention.userAvatarUrl}}"
                          alt=""
                  />
                </div>
              </a>
              <div class="top-details">
                <a href="" class="name"  th:href="@{/user/toOnesInfo(id=${attention.uid})}">
                  <p th:text="${attention.username}">XXX</p>
                </a>
                <p class="time" th:text="${attention.time}">3-18</p>
              </div>
              <div class="report-remove">
                <div
                        class="rm-icon"
                        th:bid="${attention.id}"
                        th:otherid="${attention.uid}"
                        onclick="reportfn(this)"
                >
                  <i class="iconfont">&#xe62e;</i>
                </div>
                <ul class="rm-detials hidden">
                  <li
                          class="tip-off-li"
                          th:bid="${attention.id}"
                          onclick="tipOffFn(this)"
                  >
                    投诉
                  </li>
                  <li
                          class="remove-li"
                          th:bid="${attention.id}"
                          onclick="removeBlog(this)"
                  >
                    删除
                  </li>
                </ul>
              </div>
            </div>
            <div class="news-container">
              <div class="container">
                <a class="color" th:href="@{/blog/skipToBlog(label=${attention.label})}" th:text="'#'+${attention.label}+'#'"></a>&nbsp;&nbsp;<span class="container-text" th:text="${attention.text}"></span>

                <span class="collapse more">...展开</span>
              </div>
              <div class="news-content">
                <div
                        class="news-content-img"
                        th:each="img:${attention.pictureUrl}"
                >
                  <img
                          th:src="@{${img}}"
                          src="../../static/img/logo.jpg"
                          alt=""
                          onclick="showModel(this)"
                  />
                </div>
              </div>
            </div>
            <div class="foot">
              <div class="share">
                <i class="iconfont">&#xe62f;</i>
                <span
                        th:text="${attention.transmit}>0?${attention.transmit}:'分享'"
                >12</span
                >
              </div>
              <div class="assess" th:bid="${attention.id}">
                <i class="iconfont">&#xe695;</i>
                <span th:text="${attention.comment}>0?${attention.comment}:'评论'"
                >12</span
                >
              </div>
              <div class="store">
                <i class="iconfont">&#xe647;</i>
                <span>收藏</span>
              </div>
              <div class="like">
                <i class="iconfont">&#xe62b;</i>
                <span th:text="${attention.likes}>0?${attention.likes}:'点赞'"
                >12</span
                >
              </div>
            </div>
            <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
                    maxlength="140"
            ></textarea>
              <span class="comment-ddl">还可输入140字</span>
              <button class="comment-btn disable" th:bid="${attention.id}">
                评论
              </button>
              <div class="comment">

              </div>
              <div class="blog-skip" >
                <a th:href="@{/blog/skipInEnvelope(id=${attention.id})}">查看全部评论 ></a>
              </div>
            </div>
          </div>
        </div>
        <p class="none hidden">暂时没有其他内容了</p>
      </div>
      <div id="right-bar">
        <div id="hot" class="hotright">
          <div class="hot-top">
            <div class="hot-top-content"><p>热搜</p></div>
            <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
          </div>
          <div class="allHotList">
            <a href="" class="all-hot"><div>查看完整榜单</div></a>
          </div>

          <a class="return-top" href="#">
            <i class="iconfont">&#xea7d;</i>
          </a>
        </div>
      </div>
    </div>

    <script
      type="text/javascript"
      src="../../static/js/jquery3.7.1.min.js"
      th:src="@{/static/js/jquery3.7.1.min.js}"
    ></script>

    <script
      type="text/javascript"
      src="../../static/customAlertConfirm/customAlertConfirm.js"
      th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"
    ></script>
    <script th:inline="javascript">
        let listArr=[[${list}]]
        console.log(listArr);
      if(listArr.length<10){
        let news=document.getElementById("news");
        news.innerHTML=news.innerHTML+` <div id="empty" ><div class="empty-text"><h3>关注的人发的文章都看完了</h3>
              <h5>以下是为你精心挑选的内容，喜欢就关注哦</h5></div>
              <div class="empty-img"><img src="/weibo/static/img/暂无消息.png" alt=""></div>
            </div>`
      }
    </script>
    <script
      type="text/javascript"
      src="../../static/js/replymask.js"
      th:src="@{/static/js/replymask.js}"
    ></script>

    <script
      type="text/javascript"
      src="../../static/js/personalPage-publish.js"
      th:src="@{/static/js/personalPage-publish.js}"
    ></script>
    <!--  <script-->
    <!--          type="text/javascript"-->
    <!--          src="../../static/js/common.js"-->
    <!--          th:src="@{/static/js/common.js}"-->
    <!--  ></script>-->
    <script
      type="text/javascript"
      src="../../static/js/home.js"
      th:src="@{/static/js/home.js}"
    ></script>
    <script
      type="text/javascript"
      src="../../static/js/more.js"
      th:src="@{/static/js/more.js}"
    ></script>
    <script
      type="text/javascript"
      src="../../static/js/add.js"
      th:src="@{/static/js/add.js}"
    ></script>
    <script
            type="text/javascript"

            th:src="@{/static/js/loadingHome.js}"
    ></script>

  </body>
</html>
